﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
    <TITLE>修改询价书</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <LINK href="../js/style.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        #inquiry-description {
            border: 3px solid #ccc; /* 给textarea添加边框 */
            border-radius: 10px; /* 圆角边框 */
            background-color: #ffffff; /* 背景色 */
            padding: 8px; /* 内边距 */
        }
        /* 修改输入框的样式 */
        input[type="text"], textarea {
            border: 1px solid #ccc; /* 设置边框为1px */
            border-radius: 5px; /* 圆角边框 */
            padding: 8px; /* 内边距 */
            font-size: 14px; /* 字体大小 */
            background-color: #f5f5f5; /* 背景色 */
            width: 100%; /* 宽度100% */
            box-sizing: border-box; /* 确保内边距不会影响宽度 */
            margin: 0; /* 去除默认的外边距 */
            outline: none; /* 去掉默认的聚焦轮廓 */
        }

        /* 聚焦时的效果 */
        input[type="text"]:focus, textarea:focus {
            background-color: #ffffff; /* 聚焦时背景变为白色 */
            border: 1px solid #0070c0; /* 聚焦时边框变为蓝色 */
            box-shadow: 0 0 3px rgba(0, 112, 192, 0.8); /* 聚焦时添加阴影效果 */
        }

        /* textarea的特殊样式 */
        textarea {
            resize: vertical; /* 允许垂直方向调整大小 */
            height: auto; /* 自适应高度 */
        }
    </style>
    <SCRIPT language="JAVASCRIPT">
        // JavaScript functions remain unchanged
    </SCRIPT>
</HEAD>
<BODY>
<div id="app">
    <TABLE style="LINE-HEIGHT: 30px" cellspacing="1" cellpadding="0" width="100%" bgColor="#336699" borderColorLight="#006699" border="0">
        <TBODY>
        <TR>
            <TD>
                <table cellspacing="1" cellpadding="3" width="100%" border="1">
                    <tbody>
                    <tr bgColor="#ffffff">
                        <td align="middle" width="100%" bgColor="#ffffff" colspan="20" height="22">
                            <b>
                                <h2><font color="#0070c0">修改询价书</font></h2>
                            </b>
                        </td>
                    </tr>
                    <tr class="t1">
                        <td noWrap width="20%">询价书编号</td>
                        <td class="t2 noWrap">&nbsp;{{ contact.inquiryNumber }}</td>
                        <td noWrap width="20%">询价书名称</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.enquireName" /></td>
                    </tr>
                    <tr class="t1">
                        <td noWrap width="20%">单位</td>
                        <td class="t2 noWrap">&nbsp;{{ contact.companyName }}</td>
                        <td noWrap width="20%">联系人</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.name" /></td>
                    </tr>
                    <tr class="t1">
                        <td noWrap width="20%">联系地址</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.address" /></td>
                        <td noWrap width="20%">联系电话</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.phone" /></td>
                    </tr>
                    <tr class="t1">
                        <td noWrap width="20%">联系传真</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.fax" /></td>
                        <td noWrap width="20%">邮编</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.zip" /></td>
                    </tr>
                    <tr class="t1">
                        <td noWrap width="20%">Email</td>
                        <td class="t2 noWrap"><input type="text" v-model="contact.email" /></td>
                        <td noWrap width="20%">报价截止时间</td>
                        <td class="t2 noWrap"><input type="datetime-local" v-model="contact.deadline" /></td>
                    </tr>
                    </tbody>
                </table>
            </TD>
        </TR>
        </TBODY>
    </TABLE>

    <TABLE cellspacing="1" cellpadding="0" width="100%" bgColor="#ffffff" borderColorLight="#ffffff" border="0">
        <TBODY>
        <TR>
            <TD>
                <TABLE cellspacing="1" cellpadding="3" width="100%" border="0">
                    <B>我公司欲采购下述物资，如贵单位有兴趣，可参与网上报价。详细物资情况如下：</B>
                    <TBODY></TBODY>
                </TABLE>
            </TD>
        </TR>
        </TBODY>
    </TABLE>

    <table style="LINE-HEIGHT: 30px" cellspacing="1" cellpadding="0" width="100%" bgColor="#336699" borderColorLight="#006699" border="0" v-for="(demand, index) in demandList" :key="index">
        <tr>
            <td>
                <table cellpadding="3" cellspacing="1" border="1" width="100%">
                    <tr>
                        <td colspan="6" align="middle" bgcolor="#99ccff"><b>需求计划{{ index + 1 }}</b></td>
                    </tr>
                    <tr class="t2">
                        <td>物资编码</td>
                        <td>&nbsp;{{ demand.ORDER_NUM }}</td>
                        <td>物资名称</td>
                        <td>&nbsp;{{ demand.MATERIAL_NAME }}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="t2">
                        <td>计量单位</td>
                        <td>&nbsp;{{ demand.MEASURE_UNIT }}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>单价(元/含税)</td>
                        <td nowrap><input type="text" v-model="demand.UNIT_PRICE" /></td>
                        <td nowrap>数量</td>
                        <td nowrap><input type="text" v-model="demand.AMOUNT" /></td>
                        <td nowrap>总价(元/含税)</td>
                        <td nowrap>{{ demand.SUM_PRICE }}</td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>报价开始时间</td>
                        <td nowrap><input type="datetime-local" v-model="demand.START_DATE"/></td>
                        <td nowrap>报价截止时间</td>
                        <td nowrap><input type="datetime-local" v-model="demand.END_DATE"/></td>
                        <td nowrap></td>
                        <td nowrap></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </TD>
        </TR>
    </TABLE>

    <TABLE style="LINE-HEIGHT: 30px" cellspacing="1" cellpadding="0" width="100%" bgColor="#336699" borderColorLight="#006699" border="1">
        <TR>
            <TD>
                <TABLE cellpadding="3" cellspacing="1" border="0" width="100%">
                    <tr class="t2">
                        <td nowrap>询价说明</td>
                        <td colspan="3" style="width:100%">
                            <textarea id="inquiry-description" v-model="contact.remark"  rows="4" style="width:100%"></textarea>
                        </td>
                    </tr>
                </TABLE>
            </TD>
        </TR>
    </TABLE>

    <div class="actions">
        <button @click="submitForm">发布</button>
        <button @click="confirmAndSubmit">确定</button>
        <button @click="reback">返回</button>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            contact: {
                id: '',
                inquiryNumber: '',
                companyName: '',
                name: '',
                address: '',
                phone: '',
                fax: '',
                zip: '',
                email: '',
                deadline: '',
                remark: '',
            },

            demandList: [],
        },
        created(){
              this.selectById();
              this.selectByIdOP();
        },
        methods: {
            // 格式化日期时间为 datetime-local 格式
            formatDateTime(dateTime) {
                console.log('调用了formatDateTime函数');
                const d = new Date(dateTime);
                const year = d.getFullYear();
                const month = String(d.getMonth() + 1).padStart(2, '0');  // 月份是从0开始的，所以需要加1
                const day = String(d.getDate()).padStart(2, '0');
                const hours = String(d.getHours()).padStart(2, '0');
                const minutes = String(d.getMinutes()).padStart(2, '0');
                const seconds = String(d.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;  // 返回符合 datetime-local 格式的字符串
            },

            // 获取询价书数据
            selectById() {
                console.log('更新页面的id', sessionStorage.getItem('id'));
                axios.get(`/put/selectByIdE?id=${sessionStorage.getItem('id')}`)
                    .then(response => {
                        const data = response.data.data;
                        this.contact = {
                            id: data[0].id,
                            inquiryNumber: data[0].enquireNum,
                            companyName: data[0].company,
                            enquireName: data[0].enquireName,
                            name: data[0].linkman,
                            address: data[0].address,
                            phone: data[0].phone,
                            fax: data[0].fax,
                            zip: data[0].zip,
                            email: data[0].email,
                            deadline: this.formatDateTime(data[0].endDate), // 格式化截止日期
                            remark: data[0].remark,
                        };
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            },

            // 获取需求列表数据
            selectByIdOP() {
                console.log('更新页面的id', sessionStorage.getItem('id'));
                axios.get(`/put/selectByIdOP?id=${sessionStorage.getItem('id')}`)
                    .then(response => {
                        const mapData = response.data.data;
                        console.log('mapData为:', mapData);
                        this.demandList = mapData;

                        // 格式化开始时间和结束时间
                        this.demandList.forEach(demand => {
                            if (demand.START_DATE) {
                                demand.START_DATE = this.formatDateTime(demand.START_DATE); // 格式化开始日期
                            }
                            if (demand.END_DATE) {
                                demand.END_DATE = this.formatDateTime(demand.END_DATE); // 格式化结束日期
                            }
                        });
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            },

            // 提交表单
            submitForm() {
                alert('调用了发布');
                // 使用 Axios 提交表单数据
                axios.post('/put/updateEnquire', this.contact)
                    .then(response => {
                        alert('提交成功');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('提交失败');
                    });
            },

            // 确认并提交表单
            confirmAndSubmit() {
                if (confirm('您确定信息正确并保存吗？')) {
                    //this.submitForm();
                    axios.post('/put/updateEnquire', this.contact)
                        .then(response => {
                            alert('提交成功');
                            this.updateOrder();
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            alert('提交失败');
                        });
                }
            },
            // 另外的一个更新
            updateOrder() {
                axios.post('/put/updateOrder', this.demandList)
                    .then(response => {
                        alert('需求计划的提交成功');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('提交失败');
                    });
            },

            // 返回上一步
            reback() {
                window.history.back();
            }
        }
    });
</script>
</BODY>
</HTML>
